<template>
	<div id="home">
		<nav-bar><div slot="center">购物街</div></nav-bar>
		<hom-swiper :banners="banners"></hom-swiper>
		<recommend :recommends="homeRecommends"></recommend>	
		<home-category class="homeCategory"></home-category>
		<tab-control 
			:titles="titles" 
			class="tab-control" 
			@tabClick="tabClick"
		>
		</tab-control>
		<good-list :goods="showGoods" />
	</div>
</template>

<script>
	
	import NavBar from '/src/components/common/navbar/NavBar.vue'
	import HomSwiper from './homecomponets/HomeSwiper.vue'
	import Recommend from './homecomponets/HomeRecommendView.vue'
	import HomeCategory from './homecomponets/HomeCategory.vue'
	import TabControl from '../../components/content/tabControl/TabControl.vue'
	import GoodList from 'components/content/goods/GoodsList'
	
	import {getHomeMultiData,getHomeGoods} from 'network/home.js'
	
	export default{
		name:'home',
		components:{
			NavBar,
			HomSwiper,
			Recommend,
			HomeCategory,
			TabControl,
			GoodList
		},
		data() {
			return {
				banners: [],
				homeRecommends:[],
				titles:['流行','新款',"精选"],
				currentTabType:'pop',
				goods:{
					'pop':{ page:0,list:[] },
					'new':{ page:0,list:[] },
					'sell':{ page:0,list:[]}
				}
			}
		},
		computed: {
		  showGoods() {
		    return this.goods[this.currentTabType].list
		  },
		  
		},
		methods: {
			tabClick(index){
				switch (index) {
				  case 0:
				    this.currentTabType = 'pop'
				    break
				  case 1:
				    this.currentTabType = 'new'
				    break
				  case 2:
				    this.currentTabType = 'sell'
				    break
				}
			},
			getHomeMultiData(){
				getHomeMultiData().then(res => {
					this.banners = res.data.banner.list;
					this.homeRecommends = res.data.recommend.list;
				})
			},
			
			getHomeGoods(type){
				const page = this.goods[type].page + 1;
				getHomeGoods(type,page).then(res => {
					this.goods[type].list.push(...res.data.list)
					this.goods[type].page += 1
				})
			}
		},
		created() {
			this.getHomeMultiData()
			this.getHomeGoods('pop')	
			this.getHomeGoods('new')	
			this.getHomeGoods('sell')	
		}
		
	}
</script>

<style scoped>
	#home{
		margin-top: 44px;
		margin-bottom: 49px;
	}
	.tab-control{
		z-index: 9;
		position: sticky;
		top: 44px;
	}
</style>
